<template>
  <base-content>
  <div class="flex justify-center align-center" style="margin-top: 100px;margin-bottom: 100px">
  <q-form
    @submit="onSubmit"
    @reset="onReset"
    class="q-gutter-md"
    style="width: 500px "
  >
    <h2>家长注册</h2>
    <q-input
      filled
      v-model="ParentName"
      label="请输入登录名 *"
      lazy-rules
      :rules="[ val => val && val.length > 0 || '登录名不能为空']"
    />
    <q-input
      filled
      v-model="password"
      label="请输入密码 *"
      lazy-rules
      :type="isPwd ? 'password' : 'text'" hint=""
      :rules="[ val => val && val.length > 0 || '密码不能为空']"
    >
      <template v-slot:append>
        <q-icon
          :name="isPwd ? 'visibility_off' : 'visibility'"
          class="cursor-pointer"
          @click="isPwd = !isPwd"
        />
      </template>
    </q-input>
    <q-input
      filled
      v-model="passwordConfirm"
      label="确认密码 *"
      lazy-rules
      :type="isPwd ? 'password' : 'text'" hint=""
      :rules="[ val => val ===  this.password && val.length > 0 || '两次输入密码不一致']"
    >
      <template v-slot:append>
        <q-icon
          :name="isPwd ? 'visibility_off' : 'visibility'"
          class="cursor-pointer"
          @click="isPwd = !isPwd"
        />
      </template>
    </q-input>
    <q-input
      filled
      v-model="RealName"
      label="请输入您的真实姓名 *"
      lazy-rules
      :rules="[ val => val && val.length > 0 || '真实姓名不能为空']"
    />
    <q-select
      v-model="preferred"
      :options="options"
      color="primary"
      filled
      clearable
      label="请选择身份"
    />
    <q-input
      filled
      v-model="tel"
      label="请输入您的邮箱 *"
      lazy-rules
      :rules="[ val => val && val.length > 0 || '邮箱不能为空']"
    />
    <q-input
      filled
      v-model="childStudentNumber"
      label="请输入您的孩子学号 *"
      lazy-rules
      :rules="[ val => val && val.length > 0 || '孩子学号不能为空']"
    />
    <div class="flex align-center justify-center">
      <q-btn label="提交" type="submit" color="primary"/>
      <q-btn label="重置" type="reset" color="primary" flat class="q-ml-sm" />
      <q-btn label="返回" type="reset" color="primary" flat class="q-ml-sm" @click="back" />
    </div>
  </q-form>
</div>
  </base-content>
</template>

<script>
import BaseContent from '../../components/BaseContent/BaseContent'
export default {
  name: 'parentRegister',
  components: { BaseContent },
  data () {
    return {
      isPwd: true,
      ParentName: null,
      password: null,
      passwordConfirm: null,
      RealName: null,
      sex: null,
      tel: null,
      childStudentNumber: null,
      preferred: '父亲',
      options: [
        {
          label: '父亲',
          value: '父亲'
        },
        {
          label: '母亲',
          value: '母亲'
        }
      ]
    }
  },
  methods: {
    onSubmit () {
      const query = {
        url: '/ParentRegisterServlet',
        methods: 'get',
        params: {
          p1: this.ParentName,
          p2: this.password,
          p3: this.passwordConfirm,
          p4: this.RealName,
          p5: this.sex,
          p6: this.tel,
          p7: this.childStudentNumber

        }
      }
      this.$fetchData(query).then(res => {
        console.log(res)
        if (res.data === '注册成功，可直接使用孩子学号登录') {
          this.$q.notify({
            icon: 'announcement',
            message: res.data,
            color: 'green',
            position: 'top',
            timeout: 3000
          })
          this.$router.push('/logon')
        }
        if (res.data === '重复注册，您可直接使用孩子学号登录') {
          this.$q.notify({
            icon: 'announcement',
            message: res.data,
            color: 'blue',
            position: 'top',
            timeout: 3000
          })
          this.$router.push('/logon')
        }
        if (res.data === '该学生不存在') {
          this.$q.notify({
            icon: 'announcement',
            message: res.data,
            color: 'blue',
            position: 'top',
            timeout: 3000
          })
        }
      }).catch(e => {
        console.log(e)
      })
    },
    onReset () {
      this.ParentName = null
      this.password = null
      this.passwordConfirm = null
      this.RealName = null
      this.sex = null
      this.tel = null
      this.childStudentNumber = null
    },
    back () {
      this.$router.push('/logon')
    }
  }
}
</script>

<style scoped>

</style>
